<template>
  <div class="battle" v-loading="loading">
    <div class="battle-title" style="display: flex;justify-content: space-between;align-items: center;">
      <div><span>盒子对战</span></div>
      <div @click="showCreateRoom = true" style="color: #8e7eed">
          <img src="@/static/img/battle/icon-create.png" />
          创建房间
      </div>
      <div @click="btnCreateBattleClick">创建游戏</div>
    </div>
          <div class="battle-tabs">
            <div
              class="battle-tab"
              v-for="(tab, index) in tabs"
              :key="tab.name"
              :class="{ active: activeTab === index }"
              @click="handleClickTab(index)"
            >
              {{ tab.name }}
            </div>
          </div>
    <!-- <div class="tab-container">
      <el-tabs v-model="activeTabNav" class="demo-tabs">
    <el-tab-pane label="全部" name="all"></el-tab-pane>
    <el-tab-pane label="进行中" name="in-progress"></el-tab-pane>
    <el-tab-pane label="等待中" name="waiting"></el-tab-pane>
    <el-tab-pane label="已结束" name="completed"></el-tab-pane>
    </el-tabs>
    </div> -->
    
    <div class="battle-box-list battle-scrollbar">
      <battle-box-item
        v-for="box in boxs"
        :key="box.id"
        :box="box"
        @click="handleClickBox(box)"
      ></battle-box-item>
    
    </div>

    <div class="d-flex flex-column flex-sm-row">
      <div class="rank" v-if="topThreeScoresYesterday.length >= 3 || runking.length">
        <!-- 排行榜 -->
        <img class="rank-image rank-image-pc" src="@/static/img/battle/rank.png" />
        <img
          class="rank-image rank-image-mobile"
          src="@/static/img/battle/rank-mobile.png"
        />

        <div class="d-flex flex-row flex-sm-column">
          <div class="battle-top3" v-if="topThreeScoresYesterday.length === 3">
            <div class="battle-top3-title">昨日三甲</div>

            <div class="battle-top3-detail">
              <battle-top3-item
                v-for="(user, i) in topThreeScoresYesterday"
                :key="user.user_id"
                :level="i === 0 ? 2 : i === 1 ? 1 : 3"
                :user="user"
              ></battle-top3-item>
            </div>
          </div>

          <!-- 今日积分排行 -->
          <div class="battle-integral-ranking" @click.stop>
            <div class="battle-integral-ranking-title">
              <img src="@/static/img/battle/trophy.png" />
              今日积分排行
            </div>

            <div class="battle-integral-ranking-list">
              <div
                class="battle-runking-list-wrapper"
                :class="{ 'show-more': showMoreRunking }"
              >
                <battle-rank-item
                  v-for="(runk, i) in runking"
                  :key="runk.user_id"
                  :runk="runk"
                  :number="i"
                ></battle-rank-item>

                <div
                  class="ranking-user-more"
                  v-show="runking.length >= 5"
                  @click="showMoreRunking = !showMoreRunking"
                >
                  {{ showMoreRunking ? "收起" : "查看更多" }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div style="flex: 1;">
        <div class="battle-header">
          <!-- tab -->
          <!-- <div class="battle-tabs">
            <div
              class="battle-tab"
              v-for="(tab, index) in tabs"
              :key="tab.name"
              :class="{ active: activeTab === index }"
              @click="handleClickTab(index)"
            >
              {{ tab.name }}
            </div>
          </div> -->
          
          <!-- 说明 -->
          <div class="battle-header-right">
            <div @click="openRuleDialog">
              <img src="@/static/img/battle/icon-rule.png" />
              活动规则
            </div>
            <div @click="handleToHistory">
              <img src="@/static/img/battle/icon-history.png" />
              历史记录
            </div>
            <div @click="showCreateRoom = true" style="color: #8e7eed">
              <img src="@/static/img/battle/icon-create.png" />
              创建房间
            </div>
          </div>
        </div>
          <div>
       <BoxCardFour />
    </div>
        <!-- 列表 -->
        <div class="battle-room-list">
          <battle-room v-for="(room ,index) in roomList" :detail="room" :key="index"></battle-room>
        </div>
      </div>
    </div>

    <create-room v-model="showCreateRoom" @close="showCreateRoom = false"></create-room>
    <skin-list-dialog ref="skinListDialog"></skin-list-dialog>
    <battle-rule ref="battleRuleRef"></battle-rule>
    <Waiting />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onBeforeMount, onBeforeUnmount } from "vue";
import BattleBoxItem from "./components/BattleBoxItem.vue";
import BattleRoom from "./components/BattleRoom.vue";
import BattleRankItem from "./components/BattleRankItem.vue";
import BattleTop3Item from "./components/BattleTop3Item.vue";
import { useTabs } from "./services";
import CreateRoom, { Box } from "./components/CreateRoom/CreateRoom.vue";
import { useBattleList } from "./services";
import BoxService from "@/services/BoxService";
import { processImageUrl } from "@/utils";
import SkinListDialog from "./components/SkinListDialog.vue";
import { useRouter } from "vue-router";
import BattleRule from "./components/BattleRule.vue";
import { ElTabs, ElTabPane } from 'element-plus';
import  BoxCardFour from "@/views/csgo/BoxCardFour.vue";
import Waiting from "./Waiting.vue";
export default defineComponent({
  setup() {
    const { tabs, activeTab } = useTabs();
    const battleListInfo = useBattleList();
    const boxs = ref<Box[]>([]);
    const skinListDialog = ref<any>();
    const showMoreRunking = ref(false);
    const router = useRouter();
    const battleRuleRef = ref<any>();
    const activeTabNav = ref('all');
    const collapseRunking = () => {
      showMoreRunking.value = false;
    };

    const getBoxTypes = () => {
      return BoxService.allType({
        type: 1,
      }).then((response) => {
        const { data } = response;
        return data.data;
      });
    };

    const getBoxs = (id: number) => {
      return BoxService.list({
        type_id: id,
        page: 1,
        page_size: 999,
        box_type: 1,
      }).then((response) => {
        const { list, total } = response.data.data;
        return list.map((item) => ({
          ...item,
          img: processImageUrl(item.img),
        }));
      });
    };

    const getBoxList = () => {
      return getBoxTypes().then((response) => {
        return Promise.all(response.map((type) => getBoxs(type.id))).then(
          (res) => (boxs.value = res.flat())
        );
      });
    };

    onBeforeMount(() => {
      getBoxList();
      window.addEventListener("click", collapseRunking);
    });

    onBeforeUnmount(() => {
      window.removeEventListener("click", collapseRunking);
    });

    return {
      tabs,
      activeTab,
      boxs,
      showMoreRunking,
          ElTabs, ElTabPane,
          activeTabNav,

      handleClickTab(index: number) {
        if (index === activeTab.value) return;
        activeTab.value = index;
        battleListInfo.getRoomList(tabs[index].value);
      },

      handleClickBox(box: Box) {
        skinListDialog.value.open(box.id, box.name);
      },

      handleToHistory() {
        router.push("/battle/history");
      },

      openRuleDialog() {
        battleRuleRef.value.open();
      },
      btnCreateBattleClick(){
        router.push("/battle/createBattle");
      },

      showCreateRoom: ref(false),
      skinListDialog,
      battleRuleRef,

      ...battleListInfo,
    };
  },

  components: {
    BattleBoxItem,
    BattleRoom,
    BattleRankItem,
    BattleTop3Item,
    CreateRoom,
    SkinListDialog,
    BattleRule,
    BoxCardFour,  
    Waiting
  },
});
</script>

<style scope lang="scss">
.battle {
  width: 1300px;
  margin: 55px auto 0 auto;
}

.battle-title {
  text-align: center;
  margin-bottom: 31px;
  font-size: 30px;
  

  // span {
  //   position: relative;

  //   &::before,
  //   &::after {
  //     content: "";
  //     position: absolute;
  //     top: 50%;
  //     width: 82px;
  //     height: 2px;
  //     background: #fff;
  //   }

  //   &::before {
  //     left: -55px;
  //     transform: translate(-100%, -50%);
  //   }

  //   &::after {
  //     right: -55px;
  //     transform: translate(100%, -50%);
  //   }
  // }
}
// .tab-container {
//   position: relative;
//   width: 100%;
//   padding: 20px;
// }
// .demo-tabs .el-tabs__active-bar {
//   display: none;
// }

// .demo-tabs .el-tabs__header {
//   border-bottom: none;
// }
// .demo-tabs {
//   position: absolute;
//   left: 20px;
//   top: 67px;
//   width: 388px;
//   height: 48px;
//   opacity: 1;
//   border-radius: 26px;
//   background: #20202B;

//   :deep(.el-tabs__header) {
//     margin: 0;
//     border-bottom: none;
//     background-color: transparent;
    
//   }

//   :deep(.el-tabs__nav-wrap) {
//     padding: 0;
//     background-color: transparent;
    

//     // &::after {
//     //   height: 0 !important; // 去除底部导航线
//     // }
//   }

//   :deep(.el-tabs__item) {
//     // position: absolute;
//     width: 80px;
//     height: 40px;
//     top: 71px;
//     left: 4px;
//     opacity: 1;
//     border-radius: 23.4px;
//     background: #2B2C38;
//     color: white;
//     font-size: 14px;
//     display: flex;
//     align-items: center;
//     justify-content: center;
//     transition: all 0.3s ease;

//     &:nth-child(1) {
//       left: 4px;
//     }

//     &:nth-child(2) {
//       left: 92px;
//     }

//     &:nth-child(3) {
//       left: 180px;
//     }

//     &:nth-child(4) {
//       left: 268px;
//     }

//     &.is-active {
//       background: #FF6619;
//       color: white;
//     }
//   }
//    // 隐藏底部白线
//   :deep(.el-tabs__active-bar) {
//     display: none !important; // 隐藏选中标签下的蓝色线条
//   }

//   :deep(.el-tabs__nav-wrap::after) {
//     height: 0 !important; // 隐藏底部白色线条
//   }
// }
.battle-box-list {
  width: 100%;
  height: 159px;
  background: #28253b;
  display: flex;
  align-items: center;
  margin-bottom: 50px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  // padding-right: 16px;
  padding: 16px 0;
  box-sizing: border-box;

  > * {
    margin-left: 16px;
  }
}

.battle-tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  left: 0px;
top: 67px;
width: 370px;
height: 48px;
opacity: 1;
border-radius: 26px;
background: #20202B;
margin-bottom: 20px;
  .battle-tab {
    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 16px;
    margin-right: 40px;
    // border-bottom: 2px solid transparent;
    // padding-bottom: 13px;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;

    &:last-child {
      margin-right: 0;
    }

    &.active {
      color:#fff;
      left: 4px;
top: 71px;
width: 80px;
height: 40px;
opacity: 1;
border-radius: 23.4px;
background: #2B2C38;
      // border-bottom-color: #8e7eed;
      // color: #8e7eed;
    }
  }
}

.battle-room-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 16px;

  > div {
    margin-right: 12px;
    margin-bottom: 12px;
  }
}

.rank {
  width: 320px;
  flex: none;
  margin-right: 32px;

  .rank-image-mobile {
    display: none;
  }

  .rank-image {
    width: 100%;
  }

  .battle-top3 {
    .battle-top3-title {
      text-align: center;
      color: #e5cf9b;
      font-size: 22px;
      margin: 30px 0 20px 0;
      text-shadow: -1px 0 0 rgb(255 255 255 / 50%);
    }

    .battle-top3-detail {
      display: flex;
      align-items: flex-end;
    }
  }

  .battle-integral-ranking-title {
    font-size: 20px;
    color: #f8f8f8;
    margin: 30px 0 20px 0;
    display: flex;
    align-items: center;
    text-shadow: -1px 0 0 rgb(255 234 0 / 50%);

    img {
      width: 24px;
      margin-right: 10px;
    }
  }

  .battle-integral-ranking-list {
    padding: 24px 16px;
    background: #28253b;
    border-radius: 8px;

    .ranking-user-more {
      display: none;
    }
  }
}

.battle-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .battle-header-right {
    display: flex;
    font-size: 18px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.4);

    > * {
      margin-right: 30px;
      cursor: pointer;
      display: flex;
      align-items: center;

      &:last-child {
        margin-right: 0;
      }
    }

    img {
      width: 20px;
      margin-right: 6px;
    }
  }
}
</style>

<!-- <style scoped lang="scss">
@media screen and (max-width: 600px) {
  .battle {
    width: 100vw;
    margin-top: 22px;
  }
  
  .battle-title {
    font-size: 17px;
    margin-bottom: 12px;
   

    span {
      &::before,
      &::after {
        width: 56px;
      }

      &::before {
        left: -18px;
      }

      &::after {
        right: -18px;
      }
    }
  }


.tab-container {
  position: relative;
  width: 100%;
  padding: 20px;
}
.demo-tabs .el-tabs__active-bar {
  display: none;
}

.demo-tabs .el-tabs__header {
  border-bottom: none;
}
.demo-tabs {
  position: absolute;
  left: 4px;
  top: 67px;
  width: 388px;
  height: 48px;
  opacity: 1;
  border-radius: 26px;
  background: #20202B;

  :deep(.el-tabs__header) {
    margin: 0;
    border-bottom: none;
    background-color: transparent;
      border-bottom: none !important; // 防止其他边框干扰
  }

  :deep(.el-tabs__nav-wrap) {
    padding: 0;
    background-color: transparent;
       border-bottom: none !important; // 去掉底部导航线

    &::after {
      height: 0 !important; // 去除底部导航线
    }
  }

  :deep(.el-tabs__item) {
    position: absolute;
    width: 80px;
    height: 40px;
    top: 71px;
    left: 4px;
    opacity: 1;
    border-radius: 23.4px;
    background: #2B2C38;
    color: white;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;

    &:nth-child(1) {
      left: 4px;
    }

    &:nth-child(2) {
      left: 92px;
    }

    &:nth-child(3) {
      left: 180px;
    }

    &:nth-child(4) {
      left: 268px;
    }

    &.is-active {
      background: #FF6619;
      color: white;
    }
  }
   // 隐藏底部白线
  :deep(.el-tabs__active-bar) {
    display: none !important; // 隐藏选中标签下的蓝色线条
  }

  :deep(.el-tabs__nav-wrap::after) {
    height: 0 !important; // 隐藏底部白色线条
  }
}
  .battle-box-list {
    height: 128px;
    margin-bottom: 24px;
  }

  .rank {
    width: 100%;
    padding: 0 6px;
    box-sizing: border-box;
    margin-bottom: 30px;

    .rank-image-pc {
      display: none;
    }

    .rank-image-mobile {
      display: inline-block;
    }

    .rank-image {
      margin-bottom: 16px;
    }

    .battle-top3 {
      flex: none;

      .battle-top3-title {
        font-size: 14px;
        margin-top: 7px;
      }
    }

    .battle-integral-ranking {
      flex: 1;
      background: #28253b;
      padding: 12px 0;
      border-radius: 8px;
      z-index: 20;

      .battle-integral-ranking-title {
        font-size: 14px;
        margin: 0 8px 3px 8px;

        img {
          width: 16px;
        }
      }

      .battle-integral-ranking-list {
        font-size: 12px;
        padding: 0;
        margin-top: 10px;
        position: relative;
        min-height: 165px;

        .battle-runking-list-wrapper {
          padding: 0 8px 8px 8px;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          background: #28253b;
          box-sizing: border-box;

          &.show-more {
            .battle-integral-ranking-item {
              &:nth-child(4) ~ .battle-integral-ranking-item {
                display: flex;
              }
            }
          }

          .battle-integral-ranking-item {
            &:nth-child(4) ~ .battle-integral-ranking-item {
              display: none;
            }
          }
        }

        .ranking-user-more {
          display: block;
          text-align: center;
          color: #8e7eed;
          margin-top: 9px;
        }
      }
    }
  }

  .battle-tabs {
    display: none;
  }

  .battle-header-right {
    font-size: 13px;
    padding: 0 10px;

    > * {
      margin-right: 25px;
    }

    img {
      width: 17px;
      margin-right: 5px;
    }
  }

  .battle-room-list {
    justify-content: space-between;
    padding: 0 8px;
  }
}
</style> -->
